<template>
 <view class="business">
   <view class="nav d_f j_c_c a_i_c">
   	<view class="text">Al Quantitative Transaction</view>
   	<image src="../../static/ct_0031_返回键.png" mode="" class="right" @tap="back"></image>
   </view>
   <view class="Invitation">My Invitation Code:{{code}}</view>
   <view class="name">USDT:{{data.money}}</view>
   <image src="../../static/ct_0012_绿色顶.png" mode="" class="header"></image>
   <view class="box">
	 <view>As our employees , We need to punch in every day , So that AIQT can conduct quantitative transactions on your account to generate income . The puch time is：{{start}}-{{end}}</view>
     <view class="d_f f_w_w">
		 <view v-for="(item,index) in list" :key="index" class="border ">
		 	<image src="../../static/ct_0018_色块1.png" mode="" class="success" v-if="item.checked"></image>	
			<view v-if="item.show&&!item.checked" class="size d_f a_i_c j_c_c">{{item.day}}</view>
		 </view>
	 </view>
   </view>
   <view class="project" @tap="project">About Project</view>
   <view class="button d_f j_c_c a_i_c" @tap="sign">Clock in</view>
 </view>
</template>

<script>
	import moment from '../../utils/moment.js'
 export default {
   data () {
     return {
       list:[],
	   start:'',
	   end:'',
	   code:'',
	   data:{},
     }
   },
   components: {

   },
   methods: {
	   back() {
	   	uni.navigateBack({
	   		delta: 1
	   	});
	   },
    getData(){
		this.$api.getSigninLog().then(res=>{
			this.list.map(item=>{
				res.data.data.map(item1=>{
					if(item.time==item1.createtime){
						item.checked=true
					}
				})
			})
			this.start=res.data.start
			this.end=res.data.end
			this.code=res.data.my_code
		})
	},
	project(){
		uni.navigateTo({
			url:'/pages/index/about?type=3&name=About project'
		})
	},
	sign(){
		if(this.data.balance<=0){
			uni.showToast({
				title: 'Please sign after project funded',
				icon:'none',
				duration: 2000
			});
		return	
		}
		let time=moment().format('YYYY-MM-DD HH:mm:ss');
		this.$api.postSignin({signinTime:time}).then(res=>{
			uni.showToast({
				title: 'Successfully signed in',
				icon:'none',
				duration: 3000,
				
			});
			this.getData()
		})
	},
	getMyWallet(){
		this.$api.mywalletData().then(res => {
			this.data=res.data
		})
	}
   },
   onShow() {

   },
   onLoad(options) {
     
	let days=moment().daysInMonth()
	let day=moment().format('DD')
	let time=moment().format('YYYY-MM-DD');
	let year=time.split('-')[0]
	let month=time.split('-')[1]
	let list=[]
	day=day.replace(/^[0]+/, '')
	for(let i =0;i<days;i++){
		let d=0
		if(i+1<10){
			d='0'+(i+1)
		}else{
			d=i+1
		}
		if(i+1==day){
			
		 list.push({day:i+1,checked:false,show:true,time:year+'-'+month+'-'+d})	
		}else{
			list.push({day:i+1,checked:false,show:false,time:year+'-'+month+'-'+d})
		}
		
	}
	this.list=list
	this.getData()
	this.getMyWallet()
   },
   watch: {

   },
   computed: {

   }
 }
</script>

<style scoped lang='scss'>
.business{
	width: 100%;
	min-height: 100%;
	background: rgb(239, 237, 238);
	position: relative;
	.nav {
		width: calc(100% - 64rpx);
		height: 160rpx;
		margin-left: 32rpx;
		position: relative;
	    z-index: 9999;
		.text {
			font-size: 32rpx;
			font-weight: 700;
		color: #FFFFFF;
		}
	    
		.right {
			width: 20rpx;
			height: 32rpx;
			position: absolute;
			left: 0rpx;
			z-index: 999;
			transform: rotate(180deg);
		}
	}
	.Invitation{
		text-align: center;
		z-index: 999;
		position: absolute;
		width: 100%;
		top: 130rpx;
		font-weight: 700;
	}
	.name{
		text-align: center;
		z-index: 999;
		position: absolute;
		width: 100%;
		top: 180rpx;
		font-weight: 700
	}
	.header{
		 position: absolute;
		 top: 0rpx;
		 width: 100%;
		 height: 229rpx;
		 z-index: 1;
	}
	.box{
		background: url('../../static/ct_0020_渐变底图.png');
		height: 830rpx;
		width: 686rpx;
		margin-left: 32rpx;
		margin-top: 100rpx;
		background-size: 100% 100%;
		padding: 64rpx 32rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		
	}
	.project{
		text-align: center;
		margin-top: 32rpx;
		font-weight: 700;
	}
	.button{
		width: 622rpx;
		margin-left: 64rpx;
		background: rgb(101,186,144);
		color: #FFFFFF;
		border-radius: 20rpx;
		height: 90rpx;
		margin-top: 64rpx;
	}
	.border{
		width: 63rpx;
		height: 63rpx;
		border: 1rpx solid #FFFFFF;
		margin-left: 32rpx;
		margin-top: 32rpx;
		.success{
			width: 100%;
			height: 100%;
		}
		.size{
			font-weight: 700;
			width: 100%;
			height: 100%;
			background: rgb(255,240,1);
		    color: #000;
		}
	}
}
</style>